﻿html, body, header, div, h1, h2, a, img, form, label, input, button, nav, ul, li, section, article, p, footer, time, aside{
	padding: 0;
	margin: 0;
}

@mixin BorderRadius($value){
	-webkit-border-radius: $value;
	-moz-border-radius: $value;
	border-radius: $value;
}

body {

	color: #ffffff;
	font-size: 12px;
	background-color: #9215f2;

		a {
		text-decoration: none;
		color: #cca3f8;
	}

	&>header {
		background: #d593ff; /* Old browsers */
		background: -moz-linear-gradient(top,  #d593ff 37%, #9116f1 100%); /* FF3.6+ */
		background: -webkit-gradient(linear, left top, left bottom, color-stop(37%,#d593ff), color-stop(100%,#9116f1)); /* Chrome,Safari4+ */
		background: -webkit-linear-gradient(top,  #d593ff 37%,#9116f1 100%); /* Chrome10+,Safari5.1+ */
		background: -o-linear-gradient(top,  #d593ff 37%,#9116f1 100%); /* Opera 11.10+ */
		background: -ms-linear-gradient(top,  #d593ff 37%,#9116f1 100%); /* IE10+ */
		background: linear-gradient(to bottom,  #d593ff 37%,#9116f1 100%); /* W3C */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d593ff', endColorstr='#9116f1',GradientType=0 ); /* IE6-9 */
	}

	header{
		#logo-container{
			float: left;
			img {
				margin: 25px 0px 0px 15px;
			}
		}

		#reg-form-container {
			float: right;
			margin: 15px 90px 0px 0px;
			input {
				margin: 10px 0px 0px 10px;
				padding: 5px 10px;
				width: 105px;
				height: 10px;
				color: #ffffff;
				@include BorderRadius(10px);
				border: 1px solid #603382;
				background-color: #b35ef3;
			}
			button {
				margin-top: 5px;
				padding: 5px 10px;
				background-color: transparent;
				border-color: #c0afce #3c2051 #3c2051 #c0afce;
				border-width: 1px;
				@include BorderRadius(10px);
				color: #ffffff;

			}
		}
		/* clearing floats */
		#header-container{   
		zoom:1;
			&:after {
			content:"";
			display: block;
			clear: both;
			height: 0;
			}
		}  
		nav {
			margin: 20px 0px 0px 30px;
			width: 970px;
			
			padding: 10px 0px 10px 15px;
			@include BorderRadius(15px);
			border: 1px solid #000000;

			ul {
				list-style-type: none;
				li {
					display: inline-block;
					position: relative;
					margin-right: 15px;
					a {
						display: block;
						color: #ffffff;
						font-size: 18px;
					}
					ul {
						display: none;
						position: absolute;
						width: 180px;
						background-color: #941df2;
						padding: 15px;
						border: 1px solid black;
						@include BorderRadius(15px);
						
						li {
							display: block;
							border-bottom: 1px solid #603382;
							margin: 0px 0px 5px 0px;

							&:hover {
								border-color: #ffffff;
							}
							a {
								padding: 5px 10px;
								font-size: 14px;
							}
						}
					}

					&:hover {
						ul {
							display: block;
							
						}
					}
				}
			}
		}
	}

	section {
		margin: 40px 0px 0px 20px;
		width: 945px;
		float:left;

		article {
			border: 1px solid #000000;
			overflow: hidden;
			margin: 0px 0px 15px 0px;
			@include BorderRadius(15px);

			header {
				h1 {
					font-size: 20px;
					margin: 25px 0px 10px 25px;
				}
			}

			p {
				margin: 0px 20px 0px 20px;
				
			}

			footer {
				text-align: right;
				margin: 10px 0px 25px 0px;
				}
		}
	}

	aside {
		float:left;
		width: 285px;
		margin: 50px 0px 0px 30px;

		ul {
			list-style-type: none;

			li {
				border: 1px solid #000000;
				@include BorderRadius(5px);
				margin-bottom: 10px;
				padding: 0px 15px 15px 15px;
				p {
					margin-bottom: 20px;
				}
					h2 {
						margin: 10px 0px 10px 0px;
					}
					ul {
						list-style-image: url('images/li-dot.png');
						margin-left: 35px;
						li {
							margin-top: 5px;
							border: none;
							padding: 0px;
						}
					}
			}
		}
	}

	footer {
		text-align: center;
		zoom:1;

		&:before {
			content:"";
			display: block;
			clear: both;
			height: 0;
		}
	}
}
